<template>
  <!-- banner area start from here -->
    <section class="banner-wrap">
            <swiper :modules="modules" :autoplay="autoplay" :pagination="{ clickable: true }" :space-between="0" @swiper="onSwiper" @slideChange="onSlideChange">
                <template v-for="dt in lists" :key="dt.id">
                    <swiper-slide>
                        <div class="swiper-itemBox">{{dt.name}}</div>
                    </swiper-slide>
                </template>
            </swiper>
    </section>
</template>

<script>
    import { onMounted,reactive,toRefs } from 'vue';
    import {useStore} from 'vuex'
    import { Navigation, Pagination, Scrollbar, A11y,Autoplay } from 'swiper';
    import { Swiper, SwiperSlide } from 'swiper/vue';
    import 'swiper/css';
    import 'swiper/css/pagination';
    
    export default{
        //props:['lists'],
        components:{
            Swiper, 
            SwiperSlide
        },
        setup(){
            const store = useStore()

            const state = reactive({
                modules : [Navigation, Pagination, Scrollbar, A11y,Autoplay],
                lists:[],
                autoplay:{
                    delay: 2000,
                    stopOnLastSlide: false,
                    disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay
                }
            })
            onMounted(async () =>{

                // const res = await store.dispatch('merchant/get_menu_by_parant_code',{
                //     SettingCode: 'Yooo_Picture'
                // })

                state.lists = [
                    {
                        id:1,
                        name:'第三方第三方第三方第三方佛挡杀佛第三方第三方第三方第三方第三方',
                        image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fc-ssl.duitang.com%2Fuploads%2Fblog%2F202106%2F19%2F20210619125952_d80aa.thumb.1000_0.jpg&refer=http%3A%2F%2Fc-ssl.duitang.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656571487&t=a47d11831350498c93200eda63ee12c8'
                    },
                    {
                        id:2,
                        name:'的非官方的个梵蒂冈共和国发过火风格和规范化股份回购和股份回购',
                        image:'https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg7.51tietu.net%2Fpic%2F2019-082412%2Fvpwwhc3ssvxvpwwhc3ssvx.jpg&refer=http%3A%2F%2Fimg7.51tietu.net&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1656571487&t=59abecd6da463440e639542a74203a5f'
                    },
                    {
                        id:3,
                        name:'的非官方的个梵蒂冈共和国发过火风格和规范化股份回购和股份回购',
                        image:'http://api.ej12366.video/upload/5e8c1c87c2a20b38d871cec2/JPMF56OxxOaQQHhA9bUQ3_mG.jpg'
                    }
                ]
                   
            })
            const onSwiper = (swiper) => {
                
            };
            const onSlideChange = (sw) => {
                //console.log(sw)
            };

            return{
                ...toRefs(state),
                onSwiper,
                onSlideChange
            }
        }
    }
    
</script>

<style lang="scss">
.banner-wrap{
    width: 100%;
    height: 100%;
    padding: 0;
    .swiper-itemBox{
        width: 100%;
        height: 400px;
        overflow: hidden;
        background-size: cover;
        background-repeat: no-repeat;
        img{
            width: 100%;
            display: block;
        }
    }
    .swiper-pagination{
        bottom: 20px;
    }
    .swiper-pagination-bullet{
        height: 10px;
        width: 10px;
        background-color: #dedddd;
        opacity: 1;
        position: relative;
        z-index: 10;
        &::after{
            position: absolute;
            content: "";
            top: -1px;
            left: -1px;
            height: 100%;
            width: 100%;
            border-radius: 50%;
            border: 1px solid #ffaf29;
            transform: scale(0);
        }
        &.swiper-pagination-bullet-active{
            background-color: #ffaf29;
            &::after{
                transform: scale(2);
                transition: .3s ease;
            }
        }
    }
}

</style>